<template>
  <view class="home flex column">
    <u-navbar :is-back="false" :title-bold="true" :title="coalMineName" back-icon-color="#333" title-color="#000">
      <view slot="right" class="navbar-right">
        <image v-if="[0, 1].includes(swiperCurrent)" src="/static/image/screen.svg" @click="clickBtn"
          class="navbar-right--icon" />
      </view>
    </u-navbar>
    <view>
      <u-tabs-swiper ref="uTabs" inactive-color="#999999" active-color="#0F643A" :list="list" :current="current"
        @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
    </view>
    <swiper class="item one" :current="swiperCurrent" @transition="transition" style="height: 100%;"
      @animationfinish="animationfinish">
      <swiper-item class="swiper-item">
        <safe v-if="swiperCurrent === 0" :coalMineName="coalMineName" :data="data" style="width: 100%; height:100%">
        </safe>
      </swiper-item>
      <swiper-item class="swiper-item">
        <gas v-if="swiperCurrent === 1" :data="data" style="width: 100%; height:100%"></gas>
      </swiper-item>
      <swiper-item class="swiper-item">
        <location v-if="swiperCurrent === 2" :data="data" style="width: 100%; height:100%"></location>
      </swiper-item>
      <swiper-item class="swiper-item">
        <videoSurveillance v-if="swiperCurrent === 3" :data="data" style="width: 100%; height:100%"></videoSurveillance>
      </swiper-item>
    </swiper>

    <u-tabbar bg-color="#0d1a51" inactive-color="#666" active-color="#fff" height="60px" icon-size="30"
      mid-button-size="40" :list="barList" :mid-button="midButton"></u-tabbar>
  </view>
</template>

<script>
import safe from './components/safe'
import gas from './components/gas'
import location from './components/location'
import videoSurveillance from './components/videoSurveillance'

export default {
  name: 'index',
  components: { safe, gas, location, videoSurveillance },
  data() {
    return {
      coalMineName: '',
      data: {},
      form: {
        status: '',
        sensorType: '', // 传感器类型
        sensorName: '' // 传感器类型名称
      },
      list: [
        {
          name: '安全监控'
        },
        {
          name: '瓦斯抽采'
        },
        {
          name: '人员定位'
        }
      ],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      barList: []
    }
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    clickBtn() {
      uni.navigateTo({
        url: `./screen`
      })
    },
    /**
     * 初始
     */
    init() {
      const videoAuth = getApp().globalData.videoAuth
      if (videoAuth) {
        this.list.push({
          name: '视频监控'
        })
      }
    }
  },
  computed: {
    midButton() {
      return getApp().globalData.tabbarMidButton
    }
  },
  destroyed() {
    // 清除监听keyword
    uni.removeStorageSync('handClickSafeScreen')
  },
  onLoad() {
    // 判断账号权限
    const userInfo = getApp().globalData.userInfo
    const data = {
      enCode: userInfo.customerCode
    }
    this.barList = getApp().globalData.list

    this.data = data
    this.coalMineName = '监测监控'
    uni.setStorageSync('handClickSafeScreen', {
      status: '',
      sensorType: '', // 传感器类型
      sensorName: '' // 传感器类型名称
    })

    this.init()
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .navbar-right {
    margin-right: 40rpx;
    &--icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .swiper-div {
    display: flex;
    width: 100%;
    margin-bottom: 10rpx;
  }
  .form-title {
    background: #e5e5e5;
    line-height: 70rpx;
    text-indent: 10rpx;
    color: #666666;
  }
}
</style>
